<template>
  <div>
    <a-modal
      :visible="visible"
      :title="title"
      @cancel="cancelChange"
      @ok="onSubmit"
      :confirmLoading="confirmLoading"
      :width="800"
      centered
    >
      <a-form layout="vertical">
        <div class="text-title">个人信息</div>
        <a-row :gutter="[20, 0]">
          <a-col :span="8">
            <a-form-item label="联系电话">
              {{ contactData.contact_name || "--" }}
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="联系电话">
              {{ contactData.contact_phone || "--" }}
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="职务">
              {{ contactData.contact_job || "--" }}
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="公司">
              {{ contactData.contact_company || "--" }}</a-form-item
            >
          </a-col>
          <a-col :span="8">
            <a-form-item label="邮箱">
              {{ contactData.contact_email || "--" }}</a-form-item
            >
          </a-col>
          <a-col :span="8">
            <a-form-item label="通讯地址">
              {{ contactData.contact_address || "--" }}
            </a-form-item>
          </a-col>
        </a-row>
        <div class="text-title">跟进信息</div>
        <a-row :gutter="[20, 0]">
          <a-col :span="12">
            <a-form-item label="客户状态" v-bind="validateInfos.contact">
              <a-select
                v-model:value="modelRef.contact"
                :options="contactOption"
                placeholder="请选择客户状态"
              ></a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="客户意向" v-bind="validateInfos.status">
              <a-select
                v-model:value="modelRef.status"
                :options="statusOption"
                placeholder="请选择客户意向"
              ></a-select>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="跟进内容" v-bind="validateInfos.follow_txt">
              <a-textarea
                v-model:value="modelRef.follow_txt"
                placeholder="请输入跟进内容"
                :rows="3"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, ref, toRefs, computed, watch, reactive } from "vue";
import request from "@/common/utils/request";
import { Form, message } from "ant-design-vue";
const useForm = Form.useForm;

export default defineComponent({
  name: "AddBrand",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: 0,
    },
    contactData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  setup(props, context) {
    const state = reactive({
      count: 0,
      parentOptions: [],
      confirmLoading: false,
      contactOption: [
        {
          label: "接通",
          value: "接通",
        },
        {
          label: "未接通",
          value: "未接通",
        },
      ],
      statusOption: [
        {
          label: "有需求",
          value: "有需求",
        },
        {
          label: "无需求",
          value: "无需求",
        },
        {
          label: "不确定",
          value: "不确定",
        },
        {
          label: "意向洽谈",
          value: "意向洽谈",
        },
        {
          label: "商务洽谈",
          value: "商务洽谈",
        },
        {
          label: "合同洽谈",
          value: "合同洽谈",
        },
      ],
    });

    const modelRef = reactive({
      contact: undefined,
      status: undefined,
      follow_txt: "",
    });
    const rulesRef = reactive({
      contact: [
        {
          required: true,
          message: "请选择客户状态",
        },
      ],
      status: [
        {
          required: true,
          message: "请选择客户意向",
        },
      ],
      follow_txt: [
        {
          required: false,
          message: "请输入跟进内容",
        },
      ],
    });

    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );

    const cancelChange = () => {
      resetFields();
      context.emit("close");
    };

    const onSubmit = () => {
      validate().then(() => {
        state.confirmLoading = true;

        let params = {
          brand_id: props.id,
          contact_id: props.contactData.id,
          follow_tag:  {
            contact: modelRef.contact,
            status: modelRef.status,
          },
          follow_txt: modelRef.follow_txt,
        };
        request
          .post("/org", "/org/custom/brand/custom/brand/follow", params)
          .then((res) => {
            state.confirmLoading = false;
            message.success(res.msg || "保存成功");
            resetFields();
            context.emit("success");
          })
          .catch((err) => {
            state.confirmLoading = false;
          });
      });
    };

    const title = computed(() => {
      return props.contactId ? "写跟进" : "写跟进";
    });

    const getContactDetail = () => {
      request
        .get("/org", `/org/brand/custom/brand/contact/${props.contactId}`)
        .then((res) => {
          sendModelRef(res.detail);
        });
    };

    const sendModelRef = (data) => {
      for (let key in data) {
        if (modelRef.hasOwnProperty(key)) {
          modelRef[key] = data[key];
        }
      }
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          //   if (props.contactId) {
          //     getContactDetail();
          //   }
        }
      }
    );

    return {
      ...toRefs(state),
      title,
      onSubmit,
      cancelChange,
      validateInfos,
      modelRef,
    };
  },
});
</script>

<style lang="less" scoped></style>
